const api = require('../../utils/api.js');
const config = require('../../utils/config.js');

Page({
  data: {
    // 输入相关
    prompt: '',
    hasContent: false,
    selectedSize: '1024x1024',
    selectedSizeLabel: '1:1',
    isGenerating: false,
    
    // 尺寸选择
    showSizeSelector: false,
    sizeOptions: [
      { label: '1:1', value: '1024x1024', ratio: '正方形', width: 1024, height: 1024 },
      { label: '3:4', value: '768x1024', ratio: '竖屏', width: 768, height: 1024 },
      { label: '4:3', value: '1024x768', ratio: '横屏', width: 1024, height: 768 },
      { label: '9:16', value: '576x1024', ratio: '手机竖屏', width: 576, height: 1024 },
      { label: '16:9', value: '1024x576', ratio: '手机横屏', width: 1024, height: 576 }
    ],
    
    // 示例图片
    examples: [],
    featuredExamples: [],
    
    // 用户上传相关
    showUploadModal: false,
    uploadImagePath: '',
    uploadData: {
      title: '',
      prompt: '',
      style: ''
    },
    uploading: false,
    canSubmit: false,
    allExamples: [],
    
    // 生成状态
    isGenerating: false,
    
    // 图标URLs
    sendIconUrl: '',
    
    // WebSocket连接
    websocket: null,
    isWebSocketConnected: false
  },

  onLoad(options) {
    // 引入图标工具函数
    const { getIconUrl } = require('../../utils/imageUtils.js');
    
    // 添加调试信息
    console.log('=== AI图片页面加载调试 ===');
    console.log('测试图标URL生成:');
    
    // 设置图标URLs
    const sendIconUrl = getIconUrl('send.png');
    this.setData({
      sendIconUrl: sendIconUrl
    });
    
    // 额外的调试测试
    console.log('=== 调试其他图标 ===');
    const testIcons = ['three.png', 'AIPortrait.png', 'touxiang.png', 'weixin.png'];
    testIcons.forEach(icon => {
      const url = getIconUrl(icon);
      console.log(`测试图标 ${icon}: ${url}`);
    });
    console.log('=== 调试完成 ===');
    
    this.loadExamples();
    this.connectWebSocket();
    
    // 如果从AI生图页面传来了图片和上传标志，自动打开上传弹窗
    if (options.uploadImage && options.showUpload === 'true') {
      const imageUrl = decodeURIComponent(options.uploadImage);
      this.setData({
        uploadImagePath: imageUrl,
        showUploadModal: true
      });
      this.checkCanSubmit();
    }
    
    // 检查是否有待发布的图片（从本地存储）
    this.checkPendingPublishImage();
  },

  onShow() {
    // 每次显示页面时检查是否有待发布的图片
    this.checkPendingPublishImage();
  },

  onUnload() {
    // 清理轮询定时器
    if (this.data.pollTimer) {
      clearInterval(this.data.pollTimer);
    }
    
    // 关闭WebSocket连接
    this.disconnectWebSocket();
  },

  /**
   * 加载示例图片
   */
  async loadExamples() {
    try {
      // 使用统一API获取所有图片（系统示例 + 用户作品）
      const response = await api.get('/api/ai-image/all-images');
      if (response.success) {
        const config = require('../../utils/config.js');
        const allExamples = (response.data || []).map((item, index) => {
          console.log('示例ID:', item.id, '类型:', typeof item.id, '标题:', item.title);
          
          // 处理图片URL，确保包含完整的服务器地址
          if (item.imageUrl && !item.imageUrl.startsWith('http')) {
            item.imageUrl = config.API_BASE_URL + item.imageUrl;
            console.log('修复图片URL:', item.imageUrl);
          }
          
          // 根据size计算真实比例高度
          const displayHeight = this.calculateDisplayHeight(item.size);
          
          return {
            ...item,
            displayHeight: displayHeight,
            gridStyle: this.getGridStyle(item.size)
          };
        });
        
        // 选择横屏图片作为轮播图（优先选择16:9, 4:3等横屏比例）
        const landscapeExamples = allExamples.filter(item => {
          if (!item.size) return false;
          const [width, height] = item.size.split('x').map(Number);
          return width > height; // 横屏图片
        });
        
        // 选择竖屏图片作为网格显示（9:16, 3:4等竖屏比例）
        const portraitExamples = allExamples.filter(item => {
          if (!item.size) return true; // 默认作为网格显示
          const [width, height] = item.size.split('x').map(Number);
          return width <= height; // 竖屏或正方形图片
        });
        
        // 如果横屏图片不足3张，用其他图片补充
        let featuredExamples = landscapeExamples.slice(0, 3);
        if (featuredExamples.length < 3) {
          const remainingNeeded = 3 - featuredExamples.length;
          const otherExamples = allExamples.filter(item => !featuredExamples.includes(item));
          featuredExamples = [...featuredExamples, ...otherExamples.slice(0, remainingNeeded)];
        }
        
        // 网格显示剩余图片，优先显示竖屏图片
        const usedIds = featuredExamples.map(item => item.id);
        const gridExamples = allExamples.filter(item => !usedIds.includes(item.id));
        
        // 先清空数据，然后重新设置，确保触发重新渲染
        this.setData({
          examples: [],
          featuredExamples: []
        });
        
        // 立即设置新数据
        this.setData({
          allExamples: allExamples,
          featuredExamples: featuredExamples,
          examples: gridExamples
        });
      }
    } catch (error) {
      console.error('加载示例图片失败:', error);
    }
  },

  /**
   * 根据图片尺寸计算显示高度
   */
  calculateDisplayHeight(size) {
    if (!size) return '300rpx';
    
    const [width, height] = size.split('x').map(Number);
    const aspectRatio = height / width;
    
    // 计算容器宽度：(750rpx - 60rpx padding - 8rpx gap) / 2 = 341rpx
    const containerWidth = 341;
    const calculatedHeight = Math.round(containerWidth * aspectRatio);
    
    // 只设定一个最小高度，让图片按真实比例显示
    const minHeight = 200;
    const finalHeight = Math.max(minHeight, calculatedHeight);
    
    console.log(`图片 ${size}: 宽高比${aspectRatio.toFixed(2)}, 计算高度${calculatedHeight}rpx, 最终高度${finalHeight}rpx`);
    return `${finalHeight}rpx`;
  },

  /**
   * 获取网格样式
   */
  getGridStyle(size) {
    // 暂时移除跨行样式，保持网格整齐
    return '';
  },

  /**
   * 轮播图切换事件
   */
  onCarouselChange(e) {
    // 可以在这里添加轮播图切换的逻辑
    console.log('轮播图切换到:', e.detail.current);
  },

  /**
   * 输入框内容变化
   */
  onPromptInput(e) {
    const newPrompt = e.detail.value;
    const hasContent = newPrompt.trim() !== '';
    console.log('输入内容变化:', newPrompt);
    console.log('是否有内容:', hasContent);
    this.setData({
      prompt: newPrompt,
      hasContent: hasContent
    });
  },

  /**
   * 显示尺寸选择器
   */
  showSizeSelector() {
    this.setData({
      showSizeSelector: true
    });
  },

  /**
   * 选择尺寸
   */
  selectSize(e) {
    const { size, label } = e.currentTarget.dataset;
    this.setData({
      selectedSize: size,
      selectedSizeLabel: label,
      showSizeSelector: false
    });
  },

  /**
   * 关闭尺寸选择器
   */
  closeSizeSelector() {
    this.setData({
      showSizeSelector: false
    });
  },

  /**
   * 查看示例详情
   */
  viewExampleDetail(e) {
    const { example } = e.currentTarget.dataset;
    
    // 判断是系统示例还是用户作品
    if (example.userId) {
      // 用户作品，跳转到用户作品详情页面
      wx.navigateTo({
        url: `/pages/user-work-detail/user-work-detail?id=${example.id}`
      });
    } else {
      // 系统示例，跳转到示例详情页面
      wx.navigateTo({
        url: `/pages/example-detail/example-detail?id=${example.id}`
      });
    }
  },


  /**
   * 根据尺寸值获取标签
   */
  getSizeLabelByValue(size) {
    const option = this.data.sizeOptions.find(opt => opt.value === size);
    return option ? option.label : '1:1';
  },

  /**
   * 生成图片
   */
  generateImage() {
    const { prompt } = this.data;
    
    if (!prompt.trim()) {
      wx.showToast({
        title: '请输入描述内容',
        icon: 'none'
      });
      return;
    }

    // 跳转到专用AI生图页面
    wx.navigateTo({
      url: `/pages/ai-generate/ai-generate?prompt=${encodeURIComponent(prompt)}`,
      success: () => {
        console.log('跳转到AI生图页面成功');
        // 清空当前输入框
        this.setData({ 
          prompt: '',
          hasContent: false
        });
      },
      fail: (error) => {
        console.error('页面跳转失败:', error);
        wx.showToast({
          title: '页面跳转失败',
          icon: 'error'
        });
      }
    });
  },

  /**
   * 开始轮询任务状态
   */
  startPolling(taskId) {
    if (this.data.pollTimer) {
      clearInterval(this.data.pollTimer);
    }

    this.data.pollTimer = setInterval(async () => {
      try {
        const response = await api.get(`/api/ai-image/status/${taskId}`);
        
        if (response.success) {
          const result = response.data;
          
          if (result.status === 1) {
            // 生成成功
            this.addGeneratedImage(result);
            this.stopPolling();
            wx.showToast({
              title: '生成成功',
              icon: 'success'
            });
          } else if (result.status === 2) {
            // 生成失败
            this.stopPolling();
            wx.showToast({
              title: result.statusMessage || '生成失败',
              icon: 'none'
            });
          }
          // status === 0 继续轮询
        }
      } catch (error) {
        console.error('轮询任务状态失败:', error);
        this.stopPolling();
      }
    }, 3000); // 每3秒轮询一次
  },

  /**
   * 停止轮询
   */
  stopPolling() {
    if (this.data.pollTimer) {
      clearInterval(this.data.pollTimer);
      this.data.pollTimer = null;
    }
    this.setData({
      currentTaskId: null
    });
  },

  /**
   * 添加生成的图片到列表
   */
  addGeneratedImage(result) {
    const newImage = {
      id: Date.now(),
      imageUrl: result.imageUrl,
      prompt: result.prompt,
      size: result.size,
      style: result.style,
      taskId: result.taskId,
      createTime: new Date().toLocaleString()
    };

    this.setData({
      generatedImages: [newImage, ...this.data.generatedImages]
    });
  },

  /**
   * 预览图片
   */
  previewImage(e) {
    const { url } = e.currentTarget.dataset;
    wx.previewImage({
      urls: [url],
      current: url
    });
  },

  /**
   * 保存图片到相册
   */
  async saveImage(e) {
    const { url } = e.currentTarget.dataset;
    
    try {
      // 请求保存权限
      const auth = await wx.getSetting();
      if (!auth.authSetting['scope.writePhotosAlbum']) {
        await wx.authorize({
          scope: 'scope.writePhotosAlbum'
        });
      }

      // 下载图片
      wx.showLoading({ title: '保存中...' });
      const downloadResult = await wx.downloadFile({
        url: url
      });

      // 保存到相册
      await wx.saveImageToPhotosAlbum({
        filePath: downloadResult.tempFilePath
      });

      wx.hideLoading();
      wx.showToast({
        title: '保存成功',
        icon: 'success'
      });
    } catch (error) {
      wx.hideLoading();
      console.error('保存图片失败:', error);
      wx.showToast({
        title: '保存失败',
        icon: 'none'
      });
    }
  },

  /**
   * 复制提示词
   */
  copyPrompt(e) {
    const { prompt } = e.currentTarget.dataset;
    wx.setClipboardData({
      data: prompt,
      success() {
        wx.showToast({
          title: '已复制提示词',
          icon: 'success'
        });
      }
    });
  },

  /**
   * 显示图片选择器
   */
  showImagePicker() {
    wx.showActionSheet({
      itemList: ['选择图片', '表情包'],
      success: (res) => {
        if (res.tapIndex === 0) {
          this.chooseImage();
        } else if (res.tapIndex === 1) {
          this.showEmojiPicker();
        }
      }
    });
  },

  /**
   * 选择图片
   */
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        // 这里可以处理选择的图片
        wx.showToast({
          title: '图片选择功能开发中',
          icon: 'none'
        });
      }
    });
  },

  /**
   * 显示表情选择器
   */
  showEmojiPicker() {
    wx.showToast({
      title: '表情包功能开发中',
      icon: 'none'
    });
  },

  // 用户上传相关方法
  
  /**
   * 显示上传弹窗
   */
  showUploadModal() {
    this.setData({
      showUploadModal: true
    });
  },

  /**
   * 隐藏上传弹窗
   */
  hideUploadModal() {
    this.setData({
      showUploadModal: false,
      uploadImagePath: '',
      uploadData: {
        title: '',
        prompt: '',
        style: ''
      },
      canSubmit: false
    });
  },

  /**
   * 选择上传图片
   */
  chooseUploadImage() {
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      sizeType: ['compressed'],
      success: (res) => {
        if (res.tempFiles && res.tempFiles.length > 0) {
          const file = res.tempFiles[0];
          
          // 检查文件大小 (5MB)
          if (file.size > 5 * 1024 * 1024) {
            wx.showToast({
              title: '图片大小不能超过5MB',
              icon: 'none'
            });
            return;
          }
          
          this.setData({
            uploadImagePath: file.tempFilePath
          });
          
          this.checkCanSubmit();
        }
      },
      fail: (err) => {
        console.error('选择图片失败:', err);
        wx.showToast({
          title: '选择图片失败',
          icon: 'none'
        });
      }
    });
  },

  /**
   * 上传标题输入
   */
  onUploadTitleInput(event) {
    this.setData({
      'uploadData.title': event.detail.value
    });
    this.checkCanSubmit();
  },

  /**
   * 上传提示词输入
   */
  onUploadPromptInput(event) {
    this.setData({
      'uploadData.prompt': event.detail.value
    });
    this.checkCanSubmit();
  },

  /**
   * 上传风格输入
   */
  onUploadStyleInput(event) {
    this.setData({
      'uploadData.style': event.detail.value
    });
    this.checkCanSubmit();
  },

  /**
   * 检查是否可以提交
   */
  checkCanSubmit() {
    const { uploadImagePath, uploadData } = this.data;
    const canSubmit = uploadImagePath && 
                     uploadData.title.trim() && 
                     uploadData.prompt.trim();
    
    this.setData({ canSubmit });
  },

  /**
   * 提交上传
   */
  async submitUpload() {
    if (!this.data.canSubmit || this.data.uploading) {
      return;
    }

    // 检查用户登录状态
    const token = wx.getStorageSync('token');
    if (!token) {
      wx.showToast({
        title: '请先登录',
        icon: 'none'
      });
      return;
    }

    this.setData({ uploading: true });

    try {
      const { uploadImagePath, uploadData } = this.data;
      
      // 准备上传数据
      const formData = {
        title: uploadData.title,
        prompt: uploadData.prompt,
        style: uploadData.style,
        size: this.data.selectedSize || '1024x1024'
      };
      
      console.log('上传数据:', formData);
      console.log('图片路径:', uploadImagePath);
      console.log('Token:', token);
      
      let response;
      
      // 判断是本地文件还是网络图片URL
      // 本地文件路径格式：http://tmp/... 或 wxfile://... 或其他本地路径
      // 网络图片URL格式：http://域名/... 或 https://域名/...
      const isLocalFile = uploadImagePath.startsWith('http://tmp/') || 
                         uploadImagePath.startsWith('wxfile://') ||
                         !uploadImagePath.startsWith('http');
      const isNetworkUrl = !isLocalFile;
      
      console.log('URL类型判断:', {
        path: uploadImagePath,
        isTmp: uploadImagePath.startsWith('http://tmp/'),
        isWxfile: uploadImagePath.startsWith('wxfile://'),
        isNotHttp: !uploadImagePath.startsWith('http'),
        isLocalFile: isLocalFile,
        isNetworkUrl: isNetworkUrl
      });
      
      if (isNetworkUrl) {
        console.log('检测到网络图片URL，使用URL上传方式');
        // 网络图片URL（AI生成的图片）
        const uploadPayload = {
          ...formData,
          imageUrl: uploadImagePath
        };
        response = await api.post('/api/user-upload/example', uploadPayload);
      } else {
        console.log('检测到本地图片文件，使用文件上传方式');
        // 本地图片文件
        response = await api.uploadExampleFile(uploadImagePath, formData);
      }
      
      if (response.success) {
        wx.showToast({
          title: '发布成功！',
          icon: 'success'
        });
        
        this.hideUploadModal();
        // 立即重新加载示例列表
        this.loadExamples();
        
      } else {
        throw new Error(response.message || '上传失败');
      }
      
    } catch (error) {
      console.error('上传失败:', error);
      wx.showToast({
        title: error.message || '上传失败，请重试',
        icon: 'none'
      });
    } finally {
      this.setData({ uploading: false });
    }
  },

  /**
   * 检查是否有待发布的图片
   */
  checkPendingPublishImage() {
    try {
      const pendingData = wx.getStorageSync('pendingPublishImage');
      
      if (pendingData && pendingData.imageUrl) {
        console.log('检测到待发布的图片:', pendingData);
        
        // 检查时间戳，如果超过5分钟就忽略（避免过期数据）
        const now = Date.now();
        if (now - pendingData.timestamp < 5 * 60 * 1000) {
          // 自动打开上传弹窗
          this.setData({
            uploadImagePath: pendingData.imageUrl,
            showUploadModal: true
          });
          
          // 清除本地存储的待发布数据
          wx.removeStorageSync('pendingPublishImage');
          
          console.log('自动打开上传弹窗，图片URL:', pendingData.imageUrl);
        } else {
          console.log('待发布图片已过期，清除数据');
          wx.removeStorageSync('pendingPublishImage');
        }
      }
    } catch (error) {
      console.error('检查待发布图片失败:', error);
    }
  },

  /**
   * 连接WebSocket
   */
  connectWebSocket() {
    try {
      // 根据API_BASE_URL生成正确的WebSocket URL
      let wsUrl;
      if (config.API_BASE_URL.startsWith('https://')) {
        // HTTPS对应wss://协议
        wsUrl = config.API_BASE_URL.replace('https://', 'wss://') + '/ws/ai-image';
      } else if (config.API_BASE_URL.startsWith('http://')) {
        // HTTP对应ws://协议
        wsUrl = config.API_BASE_URL.replace('http://', 'ws://') + '/ws/ai-image';
      } else {
        console.error('无效的API_BASE_URL格式:', config.API_BASE_URL);
        return;
      }
      
      console.log('WebSocket连接URL:', wsUrl);
      
      // 检查后端服务是否可用（使用已知的API接口）
      wx.request({
        url: config.API_BASE_URL + '/api/ai-image/examples',
        method: 'GET',
        timeout: 3000,
        success: (res) => {
          if (res.statusCode === 200) {
            console.log('后端服务可用，连接WebSocket');
            this.doConnectWebSocket(wsUrl);
          } else {
            console.warn('后端服务响应异常，跳过WebSocket连接');
          }
        },
        fail: () => {
          console.warn('后端服务连接失败，跳过WebSocket连接');
        }
      });
    } catch (error) {
      console.error('WebSocket连接检查失败:', error);
    }
  },

  /**
   * 执行WebSocket连接
   */
  doConnectWebSocket(wsUrl) {
    try {
      
      const websocket = wx.connectSocket({
        url: wsUrl,
        success: () => {
          console.log('WebSocket连接请求成功');
        },
        fail: (error) => {
          console.error('WebSocket连接请求失败:', error);
        }
      });

      websocket.onOpen(() => {
        console.log('WebSocket连接已打开');
        this.setData({
          websocket: websocket,
          isWebSocketConnected: true
        });
        
        wx.showToast({
          title: 'WebSocket已连接',
          icon: 'none',
          duration: 1000
        });
      });

      websocket.onMessage((event) => {
        try {
          const message = JSON.parse(event.data);
          console.log('收到WebSocket消息:', message);
          
          if (message.type === 'new_example') {
            // 收到新作品，添加到示例列表
            this.handleNewExample(message.data);
          }
        } catch (error) {
          console.error('解析WebSocket消息失败:', error);
        }
      });

      websocket.onClose(() => {
        console.log('WebSocket连接已关闭');
        this.setData({
          websocket: null,
          isWebSocketConnected: false
        });
        
        // 5秒后尝试重连
        setTimeout(() => {
          if (!this.data.isWebSocketConnected) {
            console.log('尝试重连WebSocket');
            this.connectWebSocket();
          }
        }, 5000);
      });

      websocket.onError((error) => {
        console.error('WebSocket发生错误:', error);
        this.setData({
          websocket: null,
          isWebSocketConnected: false
        });
      });

    } catch (error) {
      console.error('创建WebSocket连接失败:', error);
    }
  },

  /**
   * 断开WebSocket连接
   */
  disconnectWebSocket() {
    if (this.data.websocket) {
      this.data.websocket.close();
      this.setData({
        websocket: null,
        isWebSocketConnected: false
      });
    }
  },

  /**
   * 处理新作品
   */
  handleNewExample(newExample) {
    console.log('处理新作品:', newExample);
    
    // 为新示例添加网格样式
    const enhancedExample = this.enhanceExampleForGrid(newExample);
    
    // 添加到普通示例列表的开头
    const examples = [enhancedExample, ...this.data.examples];
    
    this.setData({
      examples: examples
    });
    
    // 显示新作品提示
    wx.showToast({
      title: '有新作品发布！',
      icon: 'none',
      duration: 2000
    });
  },

  /**
   * 为示例添加网格样式（复用loadExamples中的逻辑）
   */
  enhanceExampleForGrid(example) {
    const ratios = ['1:1', '3:4', '4:3', '9:16', '16:9'];
    const randomRatio = ratios[Math.floor(Math.random() * ratios.length)];
    
    let gridStyle = '';
    let displayHeight = '';
    
    switch (randomRatio) {
      case '1:1':
        gridStyle = 'grid-row: span 2;';
        displayHeight = '360rpx';
        break;
      case '3:4':
        gridStyle = 'grid-row: span 3;';
        displayHeight = '480rpx';
        break;
      case '4:3':
        gridStyle = 'grid-row: span 2;';
        displayHeight = '270rpx';
        break;
      case '9:16':
        gridStyle = 'grid-row: span 4;';
        displayHeight = '640rpx';
        break;
      case '16:9':
        gridStyle = 'grid-row: span 1;';
        displayHeight = '200rpx';
        break;
      default:
        gridStyle = 'grid-row: span 2;';
        displayHeight = '360rpx';
    }
    
    return {
      ...example,
      gridStyle: gridStyle,
      displayHeight: displayHeight
    };
  },

  /**
   * 图标加载成功事件
   */
  onSendIconLoad(e) {
    console.log('✅ 发送图标加载成功:', this.data.sendIconUrl);
  },

  /**
   * 图标加载失败事件  
   */
  onSendIconError(e) {
    console.error('❌ 发送图标加载失败:', this.data.sendIconUrl);
    console.error('错误详情:', e.detail);
  }

  // 注意：其他生成历史相关的方法已移除，因为现在跳转到专用生图页面
});
